<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slider-bar{
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        .header{
            height: 150px;
            background-color: blue;

        }
        .banner{
            height: 250px;
            background-color: green;
        }
        .main{
            height: 1000px;
            background-color: red;
        }
        .w{
           width: 1200px;
           margin: 10px auto;
        }
        span{
            display: none;
            position: absolute;
            bottom: 0;

        }
    </style>
</head>
<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        //1.获取元素
        var sliderbar =document.querySelector('.slider-bar');
        var banner=document.querySelector('.banner');
        //banner.offsetTop 就是被卷进去头部的大小
        var bannerTop=banner.offsetTop;
        //当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop=sliderbar.offsetTop-bannerTop;
        //获取main 主体元素
        var main=document.querySelector('.main');
        var goBack=document.querySelector('.goBack');
        var mianTop=main.offsetTop;
        //2.页面滚动事件 scroll
        document.addEventListener('scroll',function(){
            // console.log(11);
            // window.pageYOffset页面被卷去的头部的大小 一定写在滚动的外面
            console.log(window.pageYOffset);
            //3.当我们的页面被卷去的头部大于等于了172 此时 侧边栏更改为固定定位
            if(window.pageYOffset>=bannerTop){
                sliderbar.style.position='fixed';
                sliderbar.style.top=sliderbarTop+'px';
            }else{
                sliderbar.style.position='absolute';
                sliderbar.style.top='300px';
            }
            //4当我们也页面滚动到mian盒子,就显示 goback模块
            if(window.pageYOffset>=mianTop){
               goBack.style.display='block';
            }else{
                goBack.style.display='none';
            }
            

        })
        //3.当我们点击了返回顶部模块,就让窗口滚动的页面的最上方
        goBack.addEventListener('click',function(){
        //    里面的x和y不带单位 
            window.scroll(0,0);
            //因为是窗口滚动 所以对象是window
            // animate(window,0);
        })

        // 动画函数
        function animate(obj,target,callback){
    //   console.log(callback); callback=function(){} 调用的时候 callback()
    clearInterval(obj.timer);
    obj.timer= setInterval(function(){
        //步长值写在定时器的里面
        //`把步长值改为整数 不要出现小数的问题
        //cell取整函数
        // var step=Math.ceil((target-obj.offsetLeft)/10);
        var step=(target-window.pageYOffset)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        if(window.pageYOffset==target){
            clearInterval(obj.timer);
            //回调函数写道定时器结束里面
            // if(callback){
            //     //调用函数
            //     callback();
            // }
            callback&&callback();
        }
        //把每次加1 这个步长值 改为一个慢慢变小的值 步长公式:(目标值-现在的位置)/10
    //    obj.style.left=window.pageYOffset+step+'px';
    window.srcoll(0,window.pageYOffset+step);
    },30);
  }
    </script>
</body>
</html>-